import React, { Component } from "react"
import { Card, Table, Button, Space, Tag,Modal } from 'antd'
import moment from "moment";
import { connect } from 'react-redux';
import * as actions from './store/action';
import { DeleteOutlined,ExclamationCircleOutlined } from '@ant-design/icons';
import { ServerIP} from '@utils/request';
const { confirm } = Modal;
class MyOrder extends Component {
    constructor(props) {
        super(props)
        this.state = {
            pageIndex: 1,//页码
            pageSize: 1,//每页显示条数
            renderData:[],
            modalVisible: false,//新增和编辑弹框
            selectedRowKeys: [], // 存储删除多个信息的key的数组
        }
        this.columns = [
            {
                key: 0,
                title: '序号',
                align: 'center',
                render: (text, record, index) => {
                    return (this.state.pageIndex - 1) * this.state.pageSize + index + 1
                }
            },
            {
                key: 1,
                title: '订单编号',
                dataIndex: 'orderNumber',
                align: 'center'
            },
            {
                key: 2,
                title: '送货地址',
                dataIndex: 'address',
                align: 'center'
            },
            {
                key: 3,
                title: '客户联系方式',
                dataIndex: 'phone',
                align: 'center'
            },
            {
                key: 4,
                title: '总价格/(元)',
                dataIndex: 'totalPrice',
                align: 'center'
            },
            {
                key: 5,
                title: '订单状态',
                dataIndex: 'status',
                align: 'center',
                render: (record) => {
                    const statuss = {
                        "0": <Tag color='green'>已完成</Tag>,
                        "1": <Tag color='cyan'>已接单</Tag>,
                        "2": <Tag color='gold'>制作中</Tag>,
                        "3": <Tag color='volcano'>已签收</Tag>,
                        "4": <Tag color='red'>未签收</Tag>,
                        "5": <Tag color='blue'>待商家接单</Tag>,
                    }
                    return statuss[record]
                }
            },
            {
                key: 6,
                title: '创建时间',
                dataIndex: 'createTime',
                align: 'center',
                render: (text) => {
                    return moment(text).format("YYYY-MM-DD HH:SS");
                },
            },
            {
                key: 7,
                title: '操作',
                dataIndex: 'operation',
                align: 'center',
                render: (text, record) => {
                    return (
                        <Space>
                            <Button
                                size="small"
                                type='primary'
                                ghost
                                onClick={() => { 
                                    this.setState({ 
                                        modalVisible: true, 
                                        renderData: record.viewDetails 
                                    }) 
                                }}
                            >
                                查看详情
                            </Button>
                            <Button
                                size="small"
                                type='primary'
                                icon={<DeleteOutlined />}
                                ghost
                                danger
                                disabled={record.status ==="3"||"0" ? true :false}
                                onClick={() => this.deleteDatas([record.key])}
                            >
                                删除
                            </Button>
                        </Space >
                    )
                }
            }

        ];
    }
    componentDidMount() {
        this.props.getAllOrderRequest()
    }
    render() {
        const { renderData, modalVisible}=this.state
        const rowSelection = {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.changeSelectedRowKeyss,
        }
        return (
            <Card
                title="订单记录"
                extra={
                    <Button danger
                        onClick={() => this.batchDelete()}
                        disabled={this.state.selectedRowKeys.length == 0 ? true : false}
                        style={{ marginTop: "10px" }}
                    ><DeleteOutlined />
                        批量删除
                    </Button>
                }
                bordered={false}
            >
                <Table
                    columns={this.columns}
                    rowSelection={rowSelection}
                    bordered={true}
                    // scroll={{ x: 1500 }}
                    dataSource={this.props.orderLists}
                    pagination={{
                        onChange: page => {
                            this.setState({
                                pageIndex: page
                            })
                        },
                        pageSize: 5
                    }}
                />
                <Modal
                    title="查看详情"
                    visible={modalVisible}
                    onCancel={() => { this.setState({ modalVisible: false }) }}
                    footer={null}
                    destroyOnClose
                    getContainer={false}
                    width={450}

                >
                    <img src={ServerIP + renderData.photo} alt="" style={{width:"100px",height:'130px',objectFit:'cover'}}/>  
                </Modal>
            </Card>
        );
    }
    // 批量选中多个数据时存储的key数组
    changeSelectedRowKeyss = (selectedRowKeys) => {
        this.setState({
            selectedRowKeys

        })
    }
    //批量删除
    batchDelete = () => {
        const { selectedRowKeys } = this.state;
        confirm({
            title: '是否删除被选中的菜品',
            icon: <ExclamationCircleOutlined />,
            onOk: () => {
                if (selectedRowKeys.length !== 0) {
                    const obj = {
                        idList: selectedRowKeys
                    }
                    this.props.deleteOrderRequest(obj)
                }
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    //删除单挑数据
    deleteDatas = (keyArr) => {
        confirm({
            title: '是否删除被选中的菜品',
            icon: <ExclamationCircleOutlined />,
            onOk: () => {
                this.props.deleteOrderRequest(keyArr)
            },
            onCancel() {
                console.log('Cancel');
            },
        });

    }
}
const mapStateToProps = (state) => ({
    // 获取所菜单信息
    orderLists: state.orderConfig.orderLists,
})

const mapDispatchToProps = dispatch => ({
    // 获取所有数据
    getAllOrderRequest() {
        dispatch(actions.getAllOrderRequest())
    },
    deleteOrderRequest(value) {
        dispatch(actions.deleteOrderRequest(value))
    },
})
export default connect(mapStateToProps, mapDispatchToProps)(MyOrder);
